<template>
  <div>
    <!-- Banner -->
    <asn-banner :bannerList="bannerList" />
    <!-- Header -->
    <div class="super-header">
      <h1>🎮 外设推荐榜</h1>
      <p>精选高性价比 & 高性能外设，助你畅玩游戏/高效办公</p>
    </div>

    <!-- Content -->
    <section class="super-container">
      <div class="super-content">
        <div class="peripheral-list">
          <div
            v-for="item in peripherals"
            :key="item.id"
            class="peripheral-card"
          >
            <img :src="item.image" :alt="item.name" class="peripheral-image" />
            <h3>{{ item.name }}</h3>
            <p class="price">💰 {{ item.price }} 元</p>
            <p class="description">{{ item.description }}</p>
            <a :href="item.link" target="_blank" class="buy-button">查看详情</a>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
        {
          id: 1,
          img: require("@/public/img/banner01.jpg"),
        },
        {
          id: 2,
          img: require("@/public/img/banner02.jpg"),
        },
        {
          id: 3,
          img: require("@/public/img/banner03.jpg"),
        },
      ],
      peripherals: [
        {
          id: 1,
          name: "雷蛇 黑寡妇蜘蛛 V4",
          price: "899",
          description: "机械轴游戏键盘，RGB背光，响应迅速。",
          image: "https://via.placeholder.com/200x150?text=黑寡妇V4",
          link: "https://example.com/blackwidow",
        },
        {
          id: 2,
          name: "罗技 G502 HERO",
          price: "499",
          description: "高性能有线游戏鼠标，可调DPI，舒适握感。",
          image: "https://via.placeholder.com/200x150?text=G502",
          link: "https://example.com/g502",
        },
        {
          id: 3,
          name: "HyperX Cloud II",
          price: "699",
          description: "7.1声道电竞耳机，佩戴舒适，音质出色。",
          image: "https://via.placeholder.com/200x150?text=Cloud+II",
          link: "https://example.com/cloud2",
        },
        {
          id: 4,
          name: "Keychron K3 无线机械键盘",
          price: "399",
          description: "紧凑型便携键盘，支持多系统切换，静音机械轴。",
          image: "https://via.placeholder.com/200x150?text=K3",
          link: "https://example.com/k3",
        },
        {
          id: 5,
          name: "赛睿 Apex Pro TKL",
          price: "1299",
          description: "电容式混合轴键盘，手感自定义，高端体验。",
          image: "https://via.placeholder.com/200x150?text=Apex+Pro",
          link: "https://example.com/apexpro",
        },
        {
          id: 6,
          name: "达尔优 A98 三模机械键盘",
          price: "599",
          description: "无线三模，PBT键帽，性价比之选。",
          image: "https://via.placeholder.com/200x150?text=A98",
          link: "https://example.com/a98",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
@import "./css/index.less";

.super-container {
  font-family: "Segoe UI", sans-serif;
  background-color: #f8f9fa;
  color: #333;
  padding: 0 20px;
}

.super-header {
  text-align: center;
  margin: 40px 0;
  h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  p {
    font-size: 1.1rem;
    color: #666;
  }
}

.peripheral-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.peripheral-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-5px);
  }

  .peripheral-image {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 15px;
  }

  h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .price {
    color: #e91e63;
    font-weight: bold;
    margin: 10px 0;
  }

  .description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
  }

  .buy-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #0056b3;
    }
  }
}

.super-footer {
  text-align: center;
  padding: 20px 0;
  font-size: 0.9rem;
  color: #888;
  border-top: 1px solid #ddd;
}
</style>